<script setup>
import {onBeforeMount, ref} from "vue";
import {
  createKnowledgeBase,
  getKnowledgeBaseByUserId,
  getUserJoinedKnowledgeBase,
} from "@/api/request.js";
import {useUserStore} from "@/store/user.js";
import axios from "axios";
import {goBackToThePreviousPage} from "@/util/common.js";
import KnowledgeBaseItem from "@/components/knowledgeBaseItem.vue";
import {showToast} from "vant";

const store = useUserStore()
const showCreateBox = ref(false)
const formatter = (value) => value.replace(/\d/g, '');
const activeName = ref('1')

const iCreateKnowledgeBases = ref([])
const iJoinedKnowledgeBases = ref([])

onBeforeMount(async () => {
  await axios.all([
    getKnowledgeBaseByUserId({
      userId: store.userId
    }),
    getUserJoinedKnowledgeBase({
      userId: store.userId
    })
  ]).then(res => {
    if (res[0].data !== null) {
      iCreateKnowledgeBases.value = res[0].data
    }

    if (res[1].data !== null) {
      iJoinedKnowledgeBases.value = res[1].data
    }
  })
})

const infoToBeCreated = ref({
  name: '',
  intro: '',
  icon: 'default.png',
  backgroundColor: '',
  userId: store.userId
})

const createOnClick = () => {
  showToast("创建成功")
  createKnowledgeBase({
    knowledgeBase: infoToBeCreated.value
  }).then(res => {
    if (res.code === 200) {
      iCreateKnowledgeBases.value.push(res.data)
      showToast('创建成功')
    }
    showCreateBox.value = false
  }).catch(err => {
    showToast('创建失败')
  })
}
</script>

<template>
  <van-nav-bar fixed left-arrow title="我的知识库" @click-left="goBackToThePreviousPage"/>

  <div class="app-container">
    <van-button icon="plus" size="small" type="primary" @click="showCreateBox = true">创建知识库</van-button>

    <div class="show-box">
      <span>我创建的知识库</span>
      <van-divider/>
      <div v-if="iCreateKnowledgeBases.length === 0">
        <van-empty description="未创建知识库" image="network" image-size="5rem"/>
      </div>
      <div v-else class="display-box">
        <template v-for="item in iCreateKnowledgeBases">
          <KnowledgeBaseItem :knowledge-base="item"></KnowledgeBaseItem>
        </template>
      </div>
    </div>

    <div class="show-box">
      <span>我加入的知识库</span>
      <van-divider/>
      <div v-if="iJoinedKnowledgeBases.length === 0">
        <van-empty description="未加入任何知识库" image="network" image-size="5rem"/>
      </div>
      <div v-else class="display-box">
        <template v-for="item in iJoinedKnowledgeBases">
          <KnowledgeBaseItem :knowledge-base="item"></KnowledgeBaseItem>
        </template>
      </div>
    </div>

    <van-popup v-model:show="showCreateBox" :style="{ padding: '16px 8px' }" round>
      <div class="base-create">
        <h3>创建知识库</h3>

        <div class="base-mark">
          <div :style="{backgroundColor: `${infoToBeCreated.backgroundColor}`}" class="create-base-mark">
            <div class="section">
              <img :alt="`知识库图片：${infoToBeCreated.name}`" :src="`${axios.getUri()}/icon/${infoToBeCreated.icon}`"/>
            </div>
          </div>
          <van-field v-model="infoToBeCreated.backgroundColor" border label="图标选择" type="color"/>
          <van-collapse v-model="activeName" accordion>
            <van-collapse-item name="1" title="背景图片">
              <div class="select_box">
                <template v-for="item in 20">
                  <div :style="{backgroundImage: `url(${axios.getUri()}/icon/base-${item}.png)`}"
                       class="selected_gallery_photos"
                       @click="infoToBeCreated.icon = `base-${item}.png`"></div>
                </template>
              </div>
            </van-collapse-item>
          </van-collapse>
        </div>

        <van-cell-group inset>
          <van-field v-model="infoToBeCreated.name" :formatter="formatter" border label="名称"
                     placeholder="请给知识库起一个名字"/>
          <van-field v-model="infoToBeCreated.intro" label="简介" label-align="top" placeholder="知识库简介"
                     type="textarea"/>
        </van-cell-group>
        <van-button type="primary" @click="createOnClick">确认创建</van-button>
      </div>
    </van-popup>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  padding: 3.5rem .5rem 1rem;

  .show-box {
    margin: 1rem 0 1rem;
    background-color: #fff;
    padding: .5rem;
    border-radius: .5rem;
    box-shadow: 0 0 .25rem rgba(0, 0, 0, .1);


    span {
      font-size: 1.2rem;
      font-weight: 600;
      margin-top: .5rem;
      color: #333;
      display: block;
    }
  }

  .display-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3rem, 1fr));
    gap: 1rem;
  }
}


.base-create {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.base-mark {
  width: 100%;
}

.create-base-mark {
  width: 5rem;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .5rem;
  margin: .25rem auto;
  overflow: hidden;
  box-shadow: 0 0 .25rem rgba(0, 0, 0, .1);

  .section {
    width: 61.8%;
    height: 61.8%;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.select_box {
  width: 100%;
  height: 2.5rem;
  white-space: nowrap;
  overflow-x: auto;

  .selected_gallery_photos {
    width: 2rem;
    height: 2rem;
    background-size: cover;
    display: inline-block;

    & + .selected_gallery_photos {
      margin-left: 0.5rem;
    }
  }
}


</style>